<template>
	<view >
		<view style="background-color: #F6F6F6;position: sticky;left: 0rpx;top: 0rpx;z-index: 99999;">
			<u-status-bar></u-status-bar>
			<view class="plr-10 flex flex-ai-center">
				<u-icon @click="backPage()" name="arrow-left" size="20"></u-icon>
				<u-tabs :list="tabsList" @click="handTabs" keyName="lable" activeStyle="color:#1F52F8;font-weight: 500;" lineColor="#1F52F8" inactiveStyle="color:#222;font-weight: 500;"></u-tabs>
			</view>
			<w-scroll-view  v-if="currentTabsId == 0 && ![-3,-2].includes(form.series_id)">
				<view class="flex flex-ai-center mt-12 pl-16">
					<view v-for="(item, index) in collectionSeries" :key="index">
						<view class="seriesItem" :class="[Number(item.scale)<0?'zhangfuItem':'zhangfuItem1']" @click="handSeries(item)">
							<view :style="{color:item.series_id == form.series_id?'#333333':'#666666'}">{{ item.series_name }}</view>
							<view class="font-w-600 font-size-16" >{{ item.scale }}</view>
							<view v-if="item.series_id == 0" class="flex flex-ai-center font-size-11 flex-js-sb">
								<view>{{ Number(item.scale) >= 0?'+':'-' }}{{ item.today_rate }}</view>
								<view>{{ Number(item.scale) >= 0?'+':'-' }}{{ item.today_scale_zf }}%</view>
							</view>
							<view class="tui" v-if="item.is_tui==1">荐</view>
							<view :class="[form.series_id==item.series_id?'seriesItemAction':'',Number(item.scale)<0?'bgGreen':'bgRed']"></view>
						</view>
					</view>
				</view>
			</w-scroll-view>
			<!-- <view class="pl-16 mt-12" v-if="currentTabsId == 0 && ![-3,-2].includes(form.series_id)" style="display: flex;overflow-x: scroll;">
				
			</view> -->
			<u-gap height="10"></u-gap>
			<view class="other">
				<block v-if="[0,2].includes(currentTabsId)" >
					<Sort :list="list" ref="sort" @sortAfter="sortAfter" @sortCutType="sortType=$event"></Sort>
					<view class="flex flex-ai-center">
						<view @click="$u.route(`/pages/market/search`)" class="w-100 mr-12">
							<u-search placeholder="点击输入关键词" :showAction="false" style="pointer-events: none;" height="30" searchIconSize="20" bgColor="#F8F8F8" placeholderColor="#CCCCCC" searchIconColor="#BAB8B8"></u-search>
						</view>
						<w-icon @click.stop.native="classType = classType == 1?2:1" size="17" :name="classType == 1?'class-type1':'class-type2'"></w-icon>
					</view>
					<view class="flex-center-sb mt-12 font-size-12 font-w-500" style="color: #999;">
						<text>藏品名称</text>
						<view class="flex-center">
							<view class="flex-center" @click="handPriceSolt">
								<text class="mr-4">地板价</text>
								<w-icon name="sort" size="10" v-if="!['priceAsc','pricedDesc'].includes(sortType)"></w-icon>
								<w-icon name="sort-active" size="10" v-else :class="{'sortDesc':sortType=='pricedDesc'}"></w-icon>
							</view>
							<view class="flex-center ml-24" @click="handZhangDieSolt">
								<text class="mr-4">涨跌幅</text>
								<w-icon name="sort" size="10" v-if="!['zhangfuAsc','zhangfuDesc'].includes(sortType)"></w-icon>
								<w-icon name="sort-active" size="10" v-else :class="{'sortDesc':sortType=='zhangfuDesc'}"></w-icon>
							</view>
							<!-- <view class="flex-center ml-24" @click="handSaleSolt">
								<text class="mr-4">成交量</text>
								<w-icon name="sort" size="10" v-if="!['saleAsc','saleDesc'].includes(sortType)"></w-icon>
								<w-icon name="sort-active" size="10" v-else :class="{'sortDesc':sortType=='saleDesc'}"></w-icon>
							</view> -->
						</view>
					</view>
				</block>
				<block v-else>
					<view class="flex flex-ai-center flex-js-sb font-size-12 font-color-999">
						<view class="myCollectionType">
							<view 
							v-for="item in myCollectionType" 
							:key="item.type" 
							:class="{action:form.goods_type==item.type}"
							@click="form.goods_type=item.type;reset()">{{ item.name }}</view>
						</view>
						<view class="flex-center">
							<view class="flex-center" @click="handUpPriceSolt">
								<text class="mr-4">上架价格</text>
								<w-icon name="sort" size="10" v-if="![1,2].includes(form.price)"></w-icon>
								<w-icon name="sort-active" size="10" v-else :class="{'sortDesc':form.price==1}"></w-icon>
							</view>
							<view class="flex-center ml-24" @click="handNewSolt">
								<text class="mr-4">最新上架</text>
								<w-icon name="sort" size="10" v-if="![1,2].includes(form.new)"></w-icon>
								<w-icon name="sort-active" size="10" v-else :class="{'sortDesc': form.new == 1}"></w-icon>
							</view>
						</view>
					</view>
				</block> 
			</view>
		</view>
		<!-- 藏品 -->
		<view class="plr-15" v-if="[0,2].includes(currentTabsId)">
			<block v-if="classType === 1" >
				<w-scroll-view>
					<view class="collection-item" v-for="item in list" :key="item.id" @click="toDetails(item)">
						<view class="flex flex-ai-center" style="min-width: 400rpx;">
							<image :src="$ossUrl+item.listimg" mode="aspectFill" style="min-width: 108rpx;max-width:108rpx;height: 108rpx;border-radius: 16rpx;"></image>
							<view class="text plr-7">
								<view class="text-overflow-1 font-w-500">{{ item.name }}</view>
								<view class="mt-12">发行{{ item.total_num }} / 流通量{{ item.flux }}</view>
							</view>
						</view>
						<view @click.stop='targetLike(item)'>
							<u-icon name="star-fill" color="#FFBC1E" size="16" v-if="item.is_like"></u-icon>
							<u-icon name="star" color="#999999" size="16" v-else></u-icon>
						</view>
						<view class="text-center font-size-12 pr-10 font-w-500" style="width: 130rpx;flex-shrink: 0;">{{ item.is_out?'--':item.min_price }}</view>
						<view class="zhangfu-box" :class="Number(item.scale) >= 0?'bgRed':'bgGreen'">{{ Number(item.scale) >= 0?'+':'-' }}{{ item.scale }}%</view>
						<view class="text-right font-size-12 pr-8 font-w-500" style="width: 100rpx;flex-shrink: 0;">{{ item.all_sale_num }}</view>
					</view>
				</w-scroll-view>	
				
			</block>
			<block v-else>
				<view class="flex flex-js-sb flex-w" >
				    <marketActiveCard class="mb-16" v-for="item in list" :market="item" :key="item.id" @changeStar="targetLike" />
				</view>
			</block>  
		</view>
		<!-- 盲盒 -->
		<view class="plr-15 flex flex-js-sb flex-w" v-else>
		    <MarketCard class="mb-16" v-for="item in list" :market="item" :key="item.id" />
		</view>
		<w-loading emptyType="search" emptyTop="50" :type="loading"></w-loading>
		<u-gap height="100"></u-gap>
		<!-- <w-tabbar :value="1"></w-tabbar> -->
	</view>
</template>

<script>
	import { mapActions, mapState } from "vuex";
	import { getMarketList,getMarketBoxList } from '@/api/market/index.js'
	import { isCollect } from '@/api/collection/index.js'
	import Sort from "./components/sort.vue";
	import MarketCard from "./components/marketCard.vue";
	import marketActiveCard from "./components/marketActiveCard.vue";
	export default {
		components: {
		    Sort,
			MarketCard,
			marketActiveCard
		},
		data() {
			return {
				sortType:'time',
				tabsList:[
					{ lable:'活动市场',series_id:0,goods_type:2,id:0 },
					{ lable:'自由市场',series_id:0,goods_type:2,id:1 },
					{ lable:'我的关注',series_id:-2,goods_type:2,id:2 },
					// { lable:'盲盒',series_id:0,goods_type:1,id:4 },
				],
				form: {
					goods_type: 2,
					page: 1,
					list_rows: 10,
					series_id: 0,
				},
				currentTabsId:0,
				loading: 'none',
				list: [],
				myCollectionType:[
					{ type:2,name:'藏品' },
					{ type:1,name:'盲盒' }
				],
				classType:1
			};
		},
		computed: {
		    ...mapState("goods", ["collectionSeries"]),
		},
		onLoad() {
			this.getSeries().then(res=>{
				// 默认系列
				const defSeries = res.collectionSeries.filter(item=>item.is_def)
				if (defSeries.length) {
					this.form.series_id = defSeries[0].series_id
				}
				this.reset()
			});
		},
		methods:{
			...mapActions("goods", ["getSeries"]),
			handTabs(e) {
				this.currentTabsId = e.id
				this.form.goods_type = e.goods_type
				this.form.series_id = e.series_id
				this.reset()
			},
			handSeries(item) {
				this.form.series_id = item.series_id
				this.reset()
			},
			reset() {
				this.form.page = 1;
				this.list = [];
				this.loading = "none";
				this.getList()
			},
			getList() {
				if(this.currentTabsId == 1) {					
					this.getBoxList()
				}else {
					this.getCollectionList()
				}
			},
			async getBoxList() {
				if (this.loading == 'loading') return;
				try{
					this.loading='loading'
					const res = await getMarketBoxList(this.form)
					this.loading = 'nomore';
					this.list = res.data.data;
				}catch(err){
					console.log(err)
				}finally{
					uni.stopPullDownRefresh()
					!this.list.length && (this.loading = 'empty')
				}
			},
			async getCollectionList() {
				if (this.loading == 'loading') return;
				try{
					this.loading = 'loading'
					const res = await getMarketList(this.form);
					this.loading = 'nomore'
					this.list = res.data;
					this.$nextTick(() => {
					    this.$refs.sort.changeSort();
					});
				}catch(err){
					console.log(err)
				}finally {
					uni.stopPullDownRefresh()
					!this.list.length && (this.loading = 'empty')
				}
			},
			sortAfter(list) {
			    list.map((v, i) => {
			        this.$set(this.list, i, v);
			    });
			},
			handNewSolt(){
				this.form.price = 0
				this.$set(this.form,'new',this.form.new = this.form.new == 2 ? 1 : 2)
				this.reset()
			},
			handUpPriceSolt(){
				this.new = 0
				this.$set(this.form,'price',this.form.price = this.form.price == 2 ? 1 : 2)
				this.reset()
			},
			handPriceSolt() {
				if (!['priceAsc','pricedDesc'].includes(this.sortType)) {
					this.$refs.sort.changeSort('priceAsc');
				} else {
					let type = this.sortType == 'priceAsc' ? 'pricedDesc' : 'priceAsc';
					this.$refs.sort.changeSort(type);
				}
			},
			handZhangDieSolt(){
				if (!['zhangfuAsc','zhangfuDesc'].includes(this.sortType)) {
					this.$refs.sort.changeSort('zhangfuAsc');
				} else {
					let type = this.sortType == 'zhangfuAsc' ? 'zhangfuDesc' : 'zhangfuAsc';
					this.$refs.sort.changeSort(type);
				}
			},
			handSaleSolt() {
				if (!['saleAsc','saleDesc'].includes(this.sortType)) {
					this.$refs.sort.changeSort('saleAsc');
				} else {
					let type = this.sortType == 'saleAsc' ? 'saleDesc' : 'saleAsc';
					this.$refs.sort.changeSort(type);
				}
			},
			toDetails(item){
				if(!this.isLogin){
					return uni.$emit('showLogin')
				}
				this.$u.route('/pages/market/marketGoodsList',{id:item.product.id,goodsType:item.goods_type})
			},
			//切换收藏状态
			targetLike(item) {
				if (!this.isLogin) {
					return uni.$emit('showLogin')
				}
				let type = item.is_like == 0 ? 1 : 0
				isCollect(item.is_like, {
					types: item.goods_type,
					id: item.product.id
				}).then(res => {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
					item.is_like = type;
				})
			},
		},
		onPullDownRefresh() {
			this.reset()
		}
	}
</script>
<style>
	
</style>
<style lang="scss">
	page {
		background-color: #FEFEFE;
	}
	.bgRed {
		background: #EA1F15 !important;
	}
	.bgGreen {
		background: #16998B !important;
	}
	.container {
		position: sticky;
		top: 0;
		left: 0;
	}
	.u-sticky {
		top:0 !important;
	}
	.u-scroll-list {
		padding-bottom: 0 !important;
	}
	.seriesItem {
		width: 190rpx;
		height: 146rpx;
		
		border-radius: 8rpx 8rpx 0px 0px;
		color: #666666;
		margin-right: 16rpx;
		padding: 12rpx;
		font-weight: 500;
		position: relative;
		>.tui {
			width: fit-content;
			line-height: 32rpx;
			font-size: 20rpx;
			color: #fff;
			display: block;
			padding: 0 6rpx;
			border-radius: 0 8rpx 0 8rpx;
			background-color: #EA1F15;
			position: absolute;
			right: 0;
			top: 0;
		}
		.seriesItemAction {
			// color: #333;
			// content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			width: 190rpx;
			height: 8rpx;
			background: #16998B;
			
			// 动画
			animation: seriesItemAction 0.8s forwards;
			// &:before{
				
			// }
		}
		
	}
	.zhangfuItem {
		background: #CAE4E5;
		color: #43AAA7;
	}.zhangfuItem1 {
		background: linear-gradient( 180deg, #FFE3D9 0%, rgba(255,227,217,0) 100%);
		color: #DD4828;
	}
	
	
	@keyframes seriesItemAction {
		from {
			width: 0;
		}
		to {
			width: 190rpx;
		}
	}
	
	.other {
		width: 100%;
		padding: 24rpx 32rpx;
		background-color: #fff;
	}
	.collection-item {
		width: 100%;
		margin-bottom: 48rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.text {
			flex: 1;
			>view:nth-child(1) {
				font-size: 28rpx;
				color: #000;
				margin-bottom: 6rpx;
			}
			>view:nth-child(2) {
				font-size: 20rpx;
				color: #999999;
			}
		}
		.zhangfu-box {
			min-width: 122rpx;
			max-width: 122rpx;
			height: 64rpx;
			// background: #E44420;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			font-family: Objectivity, Objectivity;
			font-weight: 500;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			text-align: center;
			line-height: 64rpx;
		}
	}
	.sortDesc {
		transform: rotate(180deg);
	}
	.myCollectionType {
		background-color: #F5F5F5;
		border-radius: 64rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 4rpx;
		>view{
			width: 90rpx;
			height: 46rpx;
			color: #666666;
			font-size: 24rpx;
			text-align: center;
			line-height: 46rpx;
		}
		.action {
			background-color: #fff;
			color: $theme-color;
			font-weight: 500;
			border-radius: 64rpx;
			box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.05);
		}
	}
</style>
